<template>
  <div class="badgedetail-page">
    <div class="page-nav-bar">
      <bottom-open-app-adv v-if="!$UA.isJM"></bottom-open-app-adv>
      <div class="title-box" v-if="$UA.isJM">
        <img
          class="icon-back"
          src="../../assets/images/icon-back-arrow.png"
          @click="$appService.exit()"
        />
        <p>{{ currentData.owned == 1 ? currentData.ownedAt + '获得' : '未获得' }}</p>
      </div>
    </div>
    <div class="badge-center">
      <p class="inwx-nickname" v-if="userNickname">{{ userNickname }}的徽章</p>
      <div class="highlight flex-align-center" v-show="currentData.owned">
        <img src="../../assets/images/badge/icon-launch.png" />
      </div>
      <van-swipe
        ref="badgeSwipe"
        v-if="badgeList && badgeList.length"
        indicator-color="white"
        @change="changeSwiper"
        :loop="false"
      >
        <van-swipe-item v-for="(item, index) in badgeList" :key="index" class="badge-swipe-item">
          <div class="badge-pic-box flex-align-center">
            <img class="badge-pic" :src="item.owned ? item.activeIcon : item.inactiveIcon" />
          </div>
          <div class="badge-item-text">
            <p class="badge-item-title">{{ item.title }}</p>
            <p class="badge-item-desc">{{ item.ownedCondition }}</p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="badge-bottom">
      <button class="share-btn" @click="getBadge" v-if="btnTitle">{{ btnTitle }}</button>
      <button
        class="share-btn"
        v-if="$UA.isJM && currentData.owned == 1 && $userInfo.uuid == uuid"
        @click="share"
      >
        分享炫耀一下
      </button>
      <!-- APP外部打开引导去APP内 -->
      <button
        class="share-btn"
        :class="{ inwx: $UA.isWX }"
        v-if="!$UA.isJM && uuid"
        v-app-jump="{ to: `mtjimu://homepage?uid=${uuid}` }"
      >
        打开积幕发现更多
      </button>
      <p class="other-jimuer">{{ descTitle }}</p>
      <img class="jimu-pic" src="../../assets/images/badge/icon-jimu.png" />
    </div>
  </div>
</template>
<script>
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import qs from 'qs';
  import { Swipe, SwipeItem } from 'vant';
  import mixins from 'mixins';
  import { mapGetters } from 'vuex';

  export default {
    mixins: [mixins],
    data() {
      return {
        badgeList: [],
        currentIndex: 0,
        uuid: '',
        badgeUserInfo: {},
      };
    },
    components: {
      BottomOpenAppAdv,
      'van-swipe': Swipe,
      'van-swipe-item': SwipeItem,
    },
    computed: {
      ...mapGetters(['$userInfo']),
      currentData() {
        return this.badgeList[this.currentIndex] || {};
      },
      btnTitle() {
        // 有链接且是自己的徽章页面
        if (!this.currentData.scheme || this.$userInfo.uuid != this.uuid || !this.$UA.isJM) {
          return '';
        }
        const _text = ['', '去获取', '去升级'];
        return _text[this.currentData.buttonType] || '';
      },
      descTitle() {
        if (!this.currentData.percent) return '';
        if (this.currentData.percent == '0%') {
          return '快来成为第一个点亮该徽章的人吧';
        } else {
          return '已有' + this.currentData.percent + '的用户获得该徽章';
        }
      },
      userNickname() {
        if (this.uuid != this.$userInfo.uuid) {
          return this.badgeUserInfo.nickname;
        }
        return '';
      },
    },
    mounted() {
      this.badgeId = qs.parse(window.location.search.substr(1)).badgeId;
      this.uuid = qs.parse(window.location.search.substr(1)).uuid;
      if (!this.uuid || !this.badgeId) {
        Toast('缺少参数，请检查链接');
        return;
      }
      // 设置标题;
      this.$appService.setNav({
        title: '徽章详情',
        fullscreen: true,
        statusBarStyle: 1,
      });
      this.getBadgeDetail();
      this.getOtherUserInfoDetail();
    },
    methods: {
      //获取徽章详情
      getBadgeDetail() {
        this.$service
          .UserBadgeDetail({
            id: this.badgeId,
            uid: this.uuid,
          })
          .then((res) => {
            this.badgeList = res;
            this.currentIndex = res.findIndex((i) => i.id == this.badgeId);
            this.$nextTick(() => {
              this.$refs.badgeSwipe.swipeTo(this.currentIndex);
            });
          })
          .catch((err) => {
            Toast(err.message);
          });
      },
      // 站外显示徽章人昵称
      getOtherUserInfoDetail() {
        if (!this.$UA.isJM && this.uuid) {
          this.$service
            .UserInfoDetail({ uuid: this.uuid })
            .then((res) => {
              this.badgeUserInfo = res;
            })
            .catch((err) => {});
        }
      },
      changeSwiper(index) {
        this.currentIndex = index;
      },
      //升级或获取徽章
      getBadge() {
        this.$appService.openLink({
          link: this.currentData.scheme,
        });
      },
      //分享徽章
      share() {
        // 分情况，在app里面要用头部的话，得用openlink，不然回来会出现两个头部
        if (this.$UA.isJM) {
          setTimeout(() => {
            this.$appService.openLink({
              link:
                `https://${
                  process.env.NODE_ENV === 'development' ? 'dev-' : ''
                }jimu-h5.movtile.com/activity/sharebadge.html?type=2&uuid=` +
                this.uuid +
                '&badgeId=' +
                this.currentData.id,
            });
          }, 100);
        } else {
          setTimeout(() => {
            window.location.href = new URL(
              `sharebadge.html?type=2&uuid=` + this.uuid + '&badgeId=' + this.currentData.id,
              window.location.href,
            );
          }, 100);
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .badgedetail-page {
    min-height: 100vh;
    background-color: #151826;
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    .page-nav-bar {
      position: relative;
      padding-top: 4.8rem;
      .title-box {
        height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .icon-back {
          position: absolute;
          left: 2rem;
          width: 1.8rem;
          height: 1.8rem;
          flex: none;
        }
        p {
          text-align: center;
          width: 100%;
          font-size: 1.7rem;
        }
      }
    }
    .badge-center {
      padding-top: 2rem;
      position: relative;
      height: 100%;
      ::v-deep {
        .van-swipe {
          width: 100%;
          height: 100%;
        }
        .van-swipe__track {
          position: relative;
        }
        .van-swipe__indicators {
          top: 41.8rem;
          bottom: auto;
        }
        .van-swipe__indicator {
          width: 1rem;
          height: 1rem;
          margin: 0 0.75rem;
        }
      }
      .highlight {
        width: 30.1rem;
        height: 30.1rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        img {
          width: 100%;
          height: 100%;
          opacity: 0.9;
          animation: round_animate 15s linear infinite;
          @keyframes round_animate {
            to {
              transform: rotate(1turn);
            }
          }
        }
      }
      .badge-swipe-item {
        .badge-pic-box {
          width: 30.1rem;
          height: 30.1rem;
          margin: auto;
          .badge-pic {
            width: 14.3rem;
            height: 14.3rem;
          }
        }
        .badge-item-text {
          text-align: center;
          .badge-item-title {
            font-size: 2.1rem;
            font-weight: 500;
            color: #ffffff;
            line-height: 2.9rem;
          }
          .badge-item-desc {
            margin-top: 1rem;
            font-size: 1.4rem;
            font-weight: 400;
            color: #ffffff;
            line-height: 2rem;
          }
        }
      }
    }
    .badge-bottom {
      position: absolute;
      bottom: 14.5%;
      left: 0;
      right: 0;
      .share-btn {
        width: 19.1rem;
        height: 4.6rem;
        background: #131dff;
        border-radius: 0.3rem;
        margin: auto;
        font-size: 1.4rem;
        font-weight: 600;
        color: #ffffff;
        &.inwx {
          position: absolute;
          bottom: -6rem;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .other-jimuer {
        width: 100%;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 1.7rem;
        margin-top: 1rem;
      }
      .jimu-pic {
        opacity: 0.2 !important;
        margin-top: 4rem;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
    .inwx-nickname {
      width: 100%;
      text-align: center;
      font-size: 1.4rem;
      font-weight: 400;
      color: #ffffff;
      line-height: 2rem;
      padding: 1rem 0;
    }
    @media screen and(max-height:667px) {
      .badge-item-text {
        margin-top: -6rem !important;
      }
      ::v-deep .van-swipe__indicators {
        top: 32rem !important;
      }
    }
    @media screen and(max-height:568px) {
      .badge-item-text {
        margin-top: -6rem !important;
        .badge-item-title {
          font-size: 1.6rem !important;
        }
        .badge-item-desc {
          margin-top: 0 !important;
          font-size: 1.2rem !important;
        }
      }
      .highlight,
      .badge-pic-box {
        width: 28rem !important;
        height: 28rem !important;
      }
      ::v-deep .van-swipe__indicators {
        top: 28rem !important;
      }
    }
  }
</style>
